﻿@page "/components/list"

<DocsPage>
    <DocsPageHeader Title="Lists">
        <Description>Easily customizable and scrollable lists. Make them suit your needs with avatars, icons, or something like checkboxes.</Description>
        </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader>
                <Title>Simple List</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <ListSimpleExample/>
            </SectionContent>
            <SectionSource Code="ListSimpleExample" GitHubFolderName="List" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Nested List</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <ListNestedExample/>
            </SectionContent>
            <SectionSource Code="ListNestedExample" GitHubFolderName="List" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Avatar List</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <ListFolderExample/>
            </SectionContent>
            <SectionSource Code="ListFolderExample" GitHubFolderName="List" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Interactive</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <ListInteractiveExample/>
            </SectionContent>
            <SectionSource ShowCode="false" Code="ListInteractiveExample" GitHubFolderName="List"/>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader>
                <Title>Selection</Title>
                <Description>
                    If you set <CodeInline>Clickable="true"</CodeInline> and use <CodeInline>@@bind-SelectedItem</CodeInline> MudList will manage an exclusive single-selection across all its nested lists for you. 
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <ListSelectionExample/>
            </SectionContent>
            <SectionSource ShowCode="false" Code="ListSelectionExample" GitHubFolderName="List"/>
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
